<template>
  <div id="adminDetail">
    <el-card shadow="never" class="admin-detail-header">
      <el-row>
        <el-col :span="10" class="user-info">
          <div class="head">
            <el-avatar :size="70" src="/img3.gif"></el-avatar>
          </div>
          <div class="info">
            <p>{{ detail.username }}</p>
            <p>{{detail.level_name}}</p>
            <p>{{detail.status_name}}</p>
          </div>
          <div>
            <p style="margin: 50px 30px 0;"><span>余额 {{detail.balance}}元</span></p>
          </div>
        </el-col>
        <el-col :span="14" class="user-pane" v-if="$api.buttonPower(85)" style="text-align: right">
          <el-button @click="editButton">重置密码</el-button>
          <el-button @click="statusButton($api.Enum.StatusDisable, '停用')" v-if="detail.status == $api.Enum.StatusActive">{{'停用'}}</el-button>
          <el-button @click="statusButton($api.Enum.StatusActive, '激活')" v-if="detail.status != $api.Enum.StatusActive">{{'激活'}}</el-button>
          <el-button @click="statusButton($api.Enum.StatusDelete, '删除')" v-if="detail.status != $api.Enum.StatusActive">{{'删除'}}</el-button>

          <el-button @click="atmOpen" v-if="$api.buttonPower(93) && detail.id == $tool.getUser().user_id">提现</el-button>
        </el-col>
      </el-row>
    </el-card>

    <el-tabs v-model="tab_active_name" @tab-click="tabsClick">
      <el-tab-pane label="详细信息" name="detail" style="max-width: 800px">
        <el-descriptions :column="1" border style="padding: 0">

          <el-descriptions-item label="账户">{{ detail.account }}</el-descriptions-item>
          <el-descriptions-item label="角色">{{detail.level_name}}</el-descriptions-item>
          <el-descriptions-item label="结算模式">{{detail.settlement_type_name}}</el-descriptions-item>
          <el-descriptions-item label="状态">
            <div v-html="$api.status.status(detail.status, option[$api.Enum.DicTypeStatus])"></div>
          </el-descriptions-item>
          <el-descriptions-item label="用户名">{{ detail.username }}</el-descriptions-item>
          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
          <el-descriptions-item label="性别">{{detail.sex_name}}</el-descriptions-item>
          <el-descriptions-item label="公司描述">{{detail.firm}}</el-descriptions-item>
        </el-descriptions>
      </el-tab-pane>
      <el-tab-pane label="资金流水" name="balance_logs">
        <el-table :data="balance_logs.list" border style="width: 100%">
          <el-table-column prop="create_dt" label="创建时间"></el-table-column>
          <el-table-column prop="trade_type_name" label="类型"></el-table-column>
          <el-table-column prop="order_sn" label="单号"></el-table-column>
          <el-table-column prop="amount" label="金额"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>





    <el-dialog title="重置密码" :visible.sync="pwd_box.show" width="380px" append-to-body>
      <el-form :model="pwd_box.form" label-width="74px">
        <el-form-item label="新密码">
          <el-input v-model="pwd_box.form.password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input v-model="pwd_box.form.re_password" show-password></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="editPassword">确定修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="提现" :visible.sync="atm_box.show" width="380px" append-to-body>
      <el-form :model="atm_box.form" label-width="74px">
        <el-form-item label="到账账户">
          <el-select v-model="atm_box.form.account_id" placeholder="请选择提现账户">
            <el-option v-for="(item, index) in  dics.atm_account" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <span slot="label" style="font-width: 600;font-size: 24px">
              ￥
          </span>
          <el-input v-model="atm_box.form.amount" type="text" @input="$tool.inputAmount(atm_box.form, 'amount', $event)"></el-input>
          <p>当前余额 {{detail.balance}}元</p>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="atmSubmit">确定</el-button>
          <el-button type="text" style="margin-left: 20px" @click="atmAccountBox">提现账户</el-button>
          <el-button type="text" style="margin-left: 20px" @click="withdrawShow(true)">记录</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-drawer title="提现账户" :visible.sync="atm_account_box.show" size="40%" append-to-body>
      <iot-atm-account v-if="atm_account_box.show" @close="atmAccountClose"></iot-atm-account>
    </el-drawer>

    <el-drawer title="提现记录" :visible.sync="transaction_list.show" size="50%" append-to-body>
      <el-table :data="transaction_list.list">
        <el-table-column prop="order_sn" label="单号"></el-table-column>
        <el-table-column prop="amount" label="金额"></el-table-column>
        <el-table-column prop="status_name" label="状态"></el-table-column>
        <el-table-column prop="create_dt" label="创建时间"></el-table-column>
        <template slot="empty">
          <myEmpty></myEmpty>
        </template>
      </el-table>

      <!-- 分页 -->
      <myPaging :queryInfo="transaction_list.param" :getListData="withdrawList"></myPaging>
    </el-drawer>


  </div>
</template>

<script>
import IotAtmAccount from "@/components/business/tenant/atm_account";
export default {
  name: "IotMerchantDetail",
  components: {IotAtmAccount},
  props:{
    request: {
      id:Number
    },
  },
  data() {
    return {
      in:{ // 输入参数
        id:0
      },
      option: [],
      dics:{
        atm_account: [],
      },
      tab_active_name: 'detail',
      is_change: false,
      detail: {},
      balance_logs:{
        list: [],
        page_info:{
          page:1,
          size:10,
          total:0
        },
      },
      pwd_box:{
        show:false,
        form:{
          password: "",
          re_password: ""
        },
      },
      atm_box:{
        show: false,
        account_local:false,// 是否加载了账户选项
        form:{
          account_id: '',
          amount: '',
        }
      },
      atm_account_box: {
        show:false,
      },
      transaction_list:{  // 提现单记录
        show:false,
        param:{
          page: 1,
          size: 10,
          total: 0,
        },
        list: [],
      }
    };
  },

  mounted() {
    console.log("详情",this.$route)
    if (this.$route.query.id){
      this.in.id = Number(this.$route.query.id)
    }else if (this.request.id){
      this.in.id = this.request.id
    }

    this.$api.foundation.dicListExtendCache([
      this.$api.Enum.DicTypeStatus,
      this.$api.Enum.DicTypeSex,
      this.$api.Enum.DicTypeLevel,
    ], '', res => {
      this.option = res
    })
    this.getDetail()
  },
  beforeDestroy(){
    this.$emit('close', {is_change:this.is_change})
  },
  methods: {
    editButton() {
      this.pwd_box.show = true
    },
    editPassword() {
      let body = this.pwd_box.form
      if (!body.password){
        return this.$message.warning('请输入密码')
      }
      if (body.re_password !== body.password){
        return this.$message.warning('两次密码不相等')
      }
      body.id = this.detail.id

      this.$api.merchant.changePassword(body, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.$message.success("修改成功");
        this.pwd_box.show = false
        this.getDetail()
      });
    },
    statusButton(status, statusName) {
      let level = this.option[this.$api.Enum.DicTypeLevel][0].name
      this.$confirm(`确定${statusName}该${level}?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(()=> {
          this.$api.merchant.changeStatus({status:status, id: this.detail.id}, res=> {
            if(!res.status) {
              return this.$message.error(res.message)
            }
            this.is_change = true
            this.$message.success('操作成功!')
            if (status == this.Enum.StatusDelete){
              return this.$destroy();
            }
            this.getDetail()
          })
        })
    },
    getDetail() {
      if (!this.in.id){
        return
      }
      this.$api.merchant.merchantDetail({ id: this.in.id }, res => {
        if (!res.status) {
          return this.$message.error(res.message);
        }
        this.detail = res.data;
      });
    },
    tabsClick(tab, event){
      console.log("标签",tab, event)
      switch (tab.name){
        case 'balance_logs':
          this.balanceLogs()
      }
    },
    // 提现弹窗
    atmOpen(){
      this.atm_box.show = true
      if (!this.atm_box.account_local){
        this.atmAccountList()
        this.atm_box.account_local = true
      }
    },
    // 提现提交
    atmSubmit(){
      console.log("提交", this.atm_box.form)
      let body = this.$tool.copyJSON(this.atm_box.form)
      body.amount = Number(this.atm_box.form.amount)

      this.$api.merchant.atmWithdraw(body, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.$message.success('申请已提交')
        this.getDetail()
      })
    },
    // 提现账户 弹窗
    atmAccountBox(){
      this.atm_account_box.show = true
    },
    // 提现账户 关闭
    atmAccountClose(e){
      console.log("提现关闭",e)
      this.atm_account_box.show = false
      if (e.change){
        this.atmAccountList()
      }
    },
    // 提现账户 列表 加载
    atmAccountList(){
      this.$api.merchant.atmAccountList({size:99}, res =>{
        if (!res.status){
          this.$message.error(res.message)
          return
        }
        let atm_account = []
        res.data.list.forEach((item)=> {
          let name = ''
          if (item.type == this.$api.Enum.AtmAccountTypeBank){
            name = item.type_name+":"+this.$tool.stringReplaceStar(item.bank_card, 3, 4)
          }else if (item.type == this.$api.Enum.AtmAccountTypeWx){
            name = item.type_name+":"+item.wx_nickname
          }
          atm_account.push({id:item.id, name:name})
        })
        this.dics.atm_account = atm_account
      },{async:false})
    },
    // 资金流水
    balanceLogs(){
      let params = {
        merchant_id: this.detail.id,
        page: this.balance_logs.page_info.page,
        size: this.balance_logs.page_info.size,
        // 类型
      }
      this.$api.merchant.balanceLogs(params, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.balance_logs.list = res.data.list
        this.balance_logs.page_info = res.data.page
      })
    },
    //
    withdrawShow(show=false){
      this.transaction_list.show = show === true
      if (this.transaction_list.show && this.transaction_list.list.length == 0){
        this.withdrawList()
      }
    },
    withdrawList(){
      this.$api.merchant.withdrawList(this.transaction_list.param, res=>{
        if (!res.status){
          return this.$message.error(res.message)
        }
        this.transaction_list.list = res.data.list
        this.transaction_list.param = res.data.page
      })
    },
  },
};
</script>

<style lang="less" scoped>
#adminDetail {
  padding: 20px 20px 0;
  background: #fff;
  height: 100%;
}
.admin-detail-header{
  margin: 0 0 20px;
  .user-info{
    display: flex;
    border-right: 1px solid #DCDFE6;
    .head{
      margin-right: 10px;
    }
  }
  .user-pane{
    padding-left: 20px;
    //border-left: 1px solid #DCDFE6;
  }
}

.el-card .header {
  display: flex;
  justify-content: space-between;
}

.el-descriptions {
  padding: 20px;
}

.dialogForm {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
</style>